<script>
import store from '@/store'
export default {
  name: 'FileShow',
  data () {
    return {
      sDataFile: '', // 二级文件夹数据
      sDataUrl: '', // 二级链接数据
      tDataUrl: '', // 三级链接数据
      loading: false
    }
  },
  mounted () {
    this.loading = true

    setTimeout(() => {
      this.loading = false
      this.drawerListSolve()
    }, 500)
  },
  methods: {
    drawerListSolve () {
      console.log(store.state.drawerList)
      // 第一次处理
      this.sDataFile = store.state.drawerList.data_s.filter(
        item => item.type_s === 'file'
      )
      this.sDataUrl = store.state.drawerList.data_s.filter(
        item => item.type_s === 'url'
      )
    }
  }
}
</script>

<template>
  <!-- 手风琴内容区域 -->
  <div class="accordionArea" v-loading="loading">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 文件夹部分 -->
    <el-col>
      <el-card
        shadow="hover"
        class="accordionArea_Card"
        v-for="(items, index) in sDataFile"
        :key="index"
      >
        <div style="width: 100%; display: inline-block">
          {{ items.name_s }}
        </div>
      </el-card>
    </el-col>
    <!-- 最外层链接 -->
    <el-col>
      <el-card
        shadow="hover"
        class="accordionArea_Card"
        v-for="item in sDataUrl"
        :key="item"
      >
        <div style="width: 100%; display: inline-block">
          {{ item.name_s }}
        </div>
      </el-card>
    </el-col>

    <el-col>
      <el-card shadow="hover" class="accordionArea_Card">
        <div
          style="width: 100%; display: inline-block"
          @click="drawerListSolve()"
        >
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<style lang="less" scoped>
.accordionArea {
  margin-top: 25px;
  .accordionArea_Card {
    width: 100%;
    padding: 10px 5px;
    height: 80px;
    line-height: 55px;
    margin-top: 15px;
  }
}
</style>
